<template>
	<view class="main">
		<view class="navi-bar">
			<view class="navi-back" @click="goBack">
				<
			</view>
			<view class="navi-title">
				{{contentList.date.slice(0, 10)}}
			</view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>
		<!-- <DayList class="day-list"></DayList> -->
		<view class="content" v-for="(c, i) in contentList.content_list" :key="c.id">
			<view class="con-top" v-if="c.category == 0">
				<view class="top-info">
					<view class="top-image">
						<image :src="c.img_url" mode="widthFix"></image>
					</view>
					<view class="img-tags">
						<text>{{c.title}} | {{c.pic_info}}</text>
					</view>
					<view class="top-title">
						<text>{{c.forward}}</text>
					</view>
					<view class="top-author" @click="DisplayIndex = !DisplayIndex">
						<text>{{c.words_info}}</text>
					</view>
					<view class="aut-info" v-if="DisplayIndex">
						<view class="aut-title">
							ABOUT
						</view>
						<view class="aut-name">
							{{c.text_author_info.text_author_name}}
						</view>
						<view class="aut-work">
							{{c.text_author_info.text_author_work}}
						</view>
						<view class="aut-desc">
							{{c.text_author_info.text_author_desc}}
						</view>
					</view>
				</view>
				<view class="top-btn">
					<view class="btn-left">
						<image src="../../static/icons/fb.png" mode=""></image>
						<text class="left-text">小记</text>
					</view>
					<view class="btn-right">
						<image src="../../static/icons/xj.png" mode=""></image>
						<image src="../../static/icons/sq.png" mode=""></image>
						<view class="btn-like">
							<image src="../../static/icons/xh.png" mode=""></image>
							<text>{{c.like_count}}</text>
						</view>
						<image src="../../static/icons/zf.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	import DayList from '../../components/DayList.vue'

	export default {
		data() {
			return {
				day: 0,
				month: 'Apr',
				year: 0,
				today: '',
				contentList: [],
				isShow: false,
				DisplayIndex: false
			}
		},
		components: {
			DayList
		},
		onLoad({
			date
		}) {
			if (date) {
				this.getDailyRecommendDataFromOther(date)
			}
		},
		created() {
			
		},
		methods: {
			getToday() {
				let date = new Date()
				// console.log(date);
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				month = (month > 9) ? month : ('0' + month)
				day = (day < 10) ? ('0' + day) : day
				return year + '-' + month + '-' + day
			},
			getDailyRecommendData() {
				let url = '/channel/one/'

				http(url + this.getToday()).then(res => {
					// console.log(res.data);
					this.contentList = res.data
					console.log(this.contentList);
				})
			},
			getDailyRecommendDataFromOther(date) {
				let url = '/channel/one/'
				http(url + date).then(res => {
					// console.log(res.data);
					this.contentList = res.data
					console.log(this.contentList);
				})
			},
			goBack() {
				// 返回上一级并刷新当前页面
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.main {
		position: relative;
		width: 750rpx;
		background-color: #f1f1f1;
	}
	
	.navi-bar {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		z-index: 1000;
		background-color: #fff;
		
		.navi-back {
			margin-left: 15px;
			float: left;
		}
		
		.navi-title {
			margin-right: 28px;
			text-align: center;
			font-weight: 200;
		}
	}
	
	.day-list {
		position: absolute;
		bottom: var(--dayBottom);
		// bottom: 100px;
		float: left;
		background-color: white;
	}
	
	.content {
		padding: 0 10px 0;
		// margin-bottom: 5px;
		width: 750rpx;
		background-color: #fff;
		
		.con-top {
			width: 100%;
			
			.top-info {
				position: relative;
				// width: 100%;
				// margin: 10px;
				margin: 0 5px 10px;
				border: 1px solid #ddd;
				border-radius: 5px;
			}
			
			.top-image {
				width: 100%;
				height: 400rpx;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				overflow: hidden;
				
				image {
					width: 100%;
				}
			}
			
			.img-tags {
				text-align: center;
				font-size: 10px;
				line-height: 30px;
				color: #828282;
			}
			
			.top-title {
				padding: 20px;
				font-size: 12px;
			}
			
			.top-author {
				margin-bottom: 20px;
				text-align: center;
				font-size: 10px;
				line-height: 30px;
				color: #828282;
			}
			
			.aut-info {
				padding: 10px;
				position: absolute;
				// top: 30%;
				background-color: #f0f0f0;
				z-index: 998;
				
				.aut-title {
					font-size: 12px;
					color: #c6c6c6;
				}
				
				.aut-name {
					padding: 5px 0;
					font-size: 16px;
				}
				
				.aut-work {
					padding: 0 0 5px 0;
					font-size: 12px;
					color: #666666;
				}
				
				.aut-desc {
					font-size: 12px;
					color: #666666;
				}
			}
			
			.top-btn {
				display: flex;
				align-items: center;
				// flex-direction: row-reverse;
				justify-content: space-between;
				margin-bottom: 5px;
				width: 100%;
				height: 100rpx;
				
				image {
					width: 50rpx;
					height: 50rpx;
				}
				
				.btn-left {
					padding-left: 10px;
					display: flex;
					font-size: 10px;
					line-height: 50rpx;
					color: #828282;
				}
				
				.left-text {
					margin-left: 2px;
				}
				
				.btn-right {
					padding-right: 10px;
					display: flex;
					
					image {
						margin-left: 20px;
					}
				}
				
				.btn-like {
					// padding-left: 10px;
					display: flex;
					font-size: 10px;
					line-height: 50rpx;
					color: #828282;
				}
			}
		}
	}
</style>